<!doctype html>
<html class="ui-mobile" dir="ltr" lang="zh-cn">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
		<!--Author 上海集锦信息科技有限公司-->
		<title>文件管理器</title>
		<link rel="stylesheet" href="/static/admin/plugin/fileupload/libs/jquery.mobile.structure.css?ver=i42irv">
		<link rel="stylesheet" href="/static/admin/plugin/fileupload/skins/core/ckfinder.css?ver=i42irv">
		<link rel="stylesheet" href="/static/admin/plugin/fileupload/skins/moono/icons.css?ver=i42irv">
		<link rel="stylesheet" href="/static/admin/plugin/fileupload/skins/moono/ckfinder.css?ver=i42irv">
		<link rel="stylesheet" href="/static/admin/plugin/fileupload/skins/moono/add.css">
		<link rel="stylesheet" type="text/css" href="/static/admin/plugin/fancybox/jquery.fancybox-1.3.4.vot.css" media="screen" />
		<style>
			#btnContainer{ width: 65px; display: inline-block; font-size: 13px;    text-shadow: 0 1px 0 #f3f3f3;color: #333; height: 33px; line-height: 33px; border: 1px solid #b6b6b6;    background: linear-gradient(to bottom, #fff 0, #e4e4e4 100%);border-radius: 3px;}
			.ckf-upload-dropzone-grid-b{ display: -webkit-box;}
			.ckf-upload-dropzone-grid-b .ui-btn{ display: inline;}

			.fancybox_video_play{ display: block;width:700px; height: 400px;}
			.fancybox_video_play video{width:100%; height: 400px;}
			.ckf-files-thumbs.ckf-files-view.ui-listview li{ position: relative;}
			.ckf-files-thumbs.ckf-files-view.ui-listview li:hover .Features{ transition:all 0.3s ease 0s;-webkit-transform:all 0.3s ease 0s; opacity: 1;}
			.Features{ position: absolute; left: 1px; display: flex; align-items: center; bottom: -7px; width: 100%; transition:all 0.3s ease 0s;-webkit-transform:all 0.3s ease 0s; opacity: 0;}
			.Features .Features_list{ width: calc(50% - 6px);}
			.Features .Features_list a{ font-size: 12px; text-decoration:none; display: inline-block; padding: 5px 0px; background: #e2e2e2; color: #333; font-weight: normal; width: 100%; text-align: center; position: relative; outline: none; padding-left: 10px;}
			.Features .Features_list a span{ position: relative; top: 2px;}
			.Features .Features_list a:hover{ background: #afafaf;}
			.Features .Features_list a::after{ color: #fff; margin-right: 8px;top: 68%;left: 13px; width: 13px; height: 13px; background-size: 100%;}
			.Features .Features_list:last-child a{  border-left: 1px solid #bdbdbd;}
</style>


	</head>
	<body class="ckf-feature-css-transition ckf-ui-mode-desktop ui-alt-icon ui-mobile-viewport ckf-toolbar-visible ui-overlay-a"
	 data-theme="a" role="application">
		<div class="ckf-panel-scrollable ckf-panel-left ui-panel ui-panel-position-left ui-panel-display-push ui-panel-closed ui-body-a ui-panel-fixed ckf-folders-panel-default ckf-folders-panel"
		 data-ckf-panel="folders" data-position="left" data-theme="a" data-display="push">
			<div class="ui-panel-inner">
				<div class="ckf-panel-contents" style="height: 945px; overflow: auto;">
					<ul role="tree" data-role="listview" tabindex="20" class="ckf-tree ui-listview">
						<li class="file_type_list"><a class="ui-btn {$listtype=='img'?'ui-btn-active':''}" data-val="img"><span>图片</span></a></li>
						<li class="file_type_list"><a class="ui-btn {$listtype=='file'?'ui-btn-active':''}" data-val="file"><span>文件</span></a></li>
						<li class="file_type_list"><a class="ui-btn {$listtype=='video'?'ui-btn-active':''}" data-val="video"><span>视频</span></a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="ui-panel-dismiss" style=""></div>
		<div data-role="page" data-ckf-page="Main" class="ckf-page ckf-files-page ui-page ui-page-theme-a ui-page-active"
		 data-theme="a" style="position: relative; padding-top: 45px; min-height: 945px;">
			<div data-role="header" role="banner" class="ui-header ui-bar-inherit ui-header-fixed slidedown ckf-toolbar"
			 data-ckf-toolbar="Main" style="min-width: 196px;">
				<div tabindex="10" class="ckf-toolbar-items" role="toolbar">
					<button data-ckf-name="ShowFolders" title="" tabindex="-1" class="ckf-toolbar-item ckf-toolbar-button ckf-toolbar-item-focusable ckf-folders-toggle ui-btn ui-icon-ckf-menu ui-btn-icon-left ui-corner-all"
					 aria-hidden="true" style="display: none;"></button>

					<div id="btnContainer">
						<div title="上传" class="ckf-toolbar-item ckf-toolbar-button  ui-icon-ckf-upload ui-btn-icon-left ui-corner-all">上传</div>
					</div>

					<button data-ckf-name="Choose" title="选择" tabindex="-1" class="ckf-toolbar-item ckf-toolbar-button ckf-toolbar-item-focusable ui-btn ui-icon-ckf-choose ui-btn-icon-left ui-corner-all"
					 onClick="file_choice()">选择</button>
					<button data-ckf-name="DeleteFiles" title="删除" tabindex="-1" class="ckf-toolbar-item ckf-toolbar-button ckf-toolbar-item-focusable ui-btn ui-icon-ckf-file-delete ui-btn-icon-left ui-corner-all"
					 onClick="file_delete()">删除</button>
					<button title="搜索" class="ckf-toolbar-item ckf-toolbar-secondary" onclick="search_file()">搜索</button>
					<span style="padding-left:2px; font-size:12px; color: #666; font-weight: normal;">可以试试按Shift键选择哦!</span>
					<div class="ckf-files-filter ckf-toolbar-secondary ckf-toolbar-item" data-ckf-always-visible="true">
						<input type="text" placeholder="搜索" value="" class="keywords">
					</div>
				</div>
			</div>
			<div class="ui-panel-wrapper">
				<div class="ckf-page-regions ui-content" role="main">
					<!--上传窗口开始-->
					<div id="ckf-103" data-ckf-priority="20" style="display:none" class="upload_box">
						<div>
							<div data-role="navbar" class="ckf-upload-dropzone ui-body-a ui-navbar" tabindex="20" role="navigation">
								<div class="ui-content">
									<div class="ckf-upload-dropzone-grid">
										<div class="ckf-upload-dropzone-grid-a">
											<p id="ckf-label-346" class="ckf-upload-status">选择要上传的文件</p>
											<p class="ckf-upload-progress-text" style="display: none;"><span class="ckf-upload-progress-text-files"></span>
												<span class="ckf-upload-progress-text-bytes"></span></p>
										</div>
										<div class="ckf-upload-dropzone-grid-b">
											<div id="add_file_button">
												<div class="ui-btn ui-input-btn ui-corner-all ui-shadow ui-icon-ckf-plus ui-btn-icon-left" >
													上传文件
												</div>
											</div>
											<div class="ui-btn ui-input-btn ui-corner-all ui-shadow ui-icon-ckf-cancel ui-btn-icon-left" onClick="close_upload_box()">关闭</div>
											<div class="ui-btn ui-input-btn ui-corner-all ui-shadow ui-icon-ckf-details ui-btn-icon-left" id="uploading_close_button"
											 onClick="check_open_uploading()">Details</div>
										</div>
									</div>
									<div id="ckf-upload-progress">
										<div class="ckf-progress ckf-progress-ok">
											<div class="ckf-progress-message ckf-hidden"></div>
											<div class="ckf-progress-wrap ckf-progress-indeterminate" role="progressbar" aria-valuenow="0" aria-valuemin="0"
											 aria-valuemax="100">
												<div class="ckf-progress-bar all-ckf-progress-bar" style="width:50%;"></div>
											</div>
										</div>
									</div>
									<div class="ckf-upload-input-wrap">
										<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
											<input class="ckf-upload-input" type="file" multiple>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!--上传窗口结束-->
					<div id="ckf-97" data-ckf-priority="20"></div>
					<div class="temp_area"></div>


				</div>
			</div>
		</div>

		<div data-ckf-panel="html5upload" style="z-index:999; width:0em;" data-position="right" data-theme="a" class="ckf-panel-right ui-panel ui-panel-position-right ui-panel-display-reveal ui-body-a ui-panel-animate"
		 id="uploading_status">
			<div class="ui-panel-inner">
				<div role="banner" data-role="header" class="ckf-toolbar-items ui-header ui-bar-inherit">
					<button data-ckf-role="closePanel" data-icon="ckf-cancel" data-iconpos="notext" title="关闭" class="ui-btn-left ui-btn ui-icon-ckf-cancel ui-btn-icon-notext ui-shadow ui-corner-all">关闭</button>
				</div>
				<div class="ckf-panel-contents">
					<ul data-role="listview" data-split-theme="a" class="ckf-upload-list ui-listview" id="upload_list">
						<li data-icon="false" class="ckf-upload-summary ui-li-static ui-body-inherit ui-first-child">
							<div class="ckf-upload-item ckf-upload-item-ok ui-btn">
								<p class="ckf-upload-message">等待文件个数: <b id="file_count">0</b></p>
							</div>
						</li>



					</ul>
				</div>
			</div>
		</div>
	</body>
</html>
<script src="/static/admin/layuiAdmin/layui/layui.js"></script>
<script src="/static/admin/js/jquery.min17.js"></script>
<script type="text/javascript" src="/static/admin/plugin/fileupload/libs/jquery.mobile.js"></script>
<!---->

<link rel="stylesheet" type="text/css" href="/static/admin/plugin/webuploader/style/webuploader.css" />
<link rel="stylesheet" type="text/css" href="/static/admin/plugin/webuploader/style/style.css" />
<script type="text/javascript" src="/static/admin/plugin/webuploader/webuploader.js"></script>
<script type="text/javascript" src="/static/admin/plugin/webuploader/upload_fun.js"></script>
<script type="text/javascript" src="/static/admin/plugin/webuploader/file_select.js"></script>

<!--fancybox plus start-->
<script type="text/javascript" src="/static/admin/plugin/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="/static/admin/plugin/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<!--fancybox plus end-->

<script>
	var pubid = "{$pubid}";
	var imgwidth = {:intval($_GET['imgwidth'])};
	var imgheight = {:intval($_GET['imgheight'])};
	var img_upload_url = "{:url('sys.adminFile/add',array('pubid'=>$pubid,'listtype'=>'img'))}"; //图片上传接收地址
	var img_accept = {
		title: 'Images',
		extensions: "{:config('upload_img.exts')}",
		mimeTypes: "{:config('upload_img.mimes')}",
		maxSize: "{:config('upload_img.maxSize')}"
	}

	var file_upload_url = "{:url('sys.adminFile/add',array('pubid'=>$pubid,'listtype'=>'file'))}"; //附件上传接收地址
	var file_accept = {
		title: 'Images',
		extensions: "{:config('upload_file.exts')}",
		mimeTypes: "{:config('Think.config.upload_file.mimes.mimes')}",
		maxSize: "{:config('upload_file.maxSize')}"
	}

	var video_upload_url = "{:url('sys.adminFile/add',array('pubid'=>$pubid,'listtype'=>'video'))}"; //视频上传接收地址
	var video_accept = {
		title: 'Images',
		extensions: "{:config('upload_video.exts')}",
		mimeTypes: "{:config('upload_video.mimes')}",
		maxSize: "{:config('upload_video.maxSize')}"
	}

	var page = 0; //分页
	var keywords = ""; //搜索词
	var deleteurl = "{:url('sys.adminFile/delete')}"; //删除url
	var listtype = "{$listtype?$listtype:'img'}"; //
	if (listtype == "file") {
		var upload_url = file_upload_url; //
		var upload_accept = file_accept; //
	} else if (listtype == "video") {
		var upload_url = video_upload_url; //
		var upload_accept = video_accept; //
	} else {
		var upload_url = img_upload_url; //
		var upload_accept = img_accept; //
	}

	var file_checkbox = {$file_checkbox ? $file_checkbox : '0'};
	//获取文件模板
	function listtemp(callback) {
		$.mobile.loading("show", {
			text: "加载中",
			textVisible: true
		});
		$.get("{:url('listtemp')}", {
			"listtype": listtype
		}, function(result) {
			$(".temp_area").html(result);
			$.mobile.loading("hide");
			//
			callback();
		})
	}
	//获取文件列表
	function getlist(info_id) {
		if (!info_id) {
			$.mobile.loading("show", {
				text: "加载中",
				textVisible: true
			});
		}
		page++;
		$.get("{:url('getlist')}", {
			"page": page,
			"listtype": listtype,
			"id": info_id,
			"keywords": keywords,
			"pubid": pubid
		}, function(result) {
			//这里主要是当一个图片上传后，在前面增加单位，没有id是应用于重新加载列表，或下一页用到
			if (info_id) {
				$(".file_list").prepend(result);
				$(".file_list li:eq(0) div").click(); //当上传文件的时候自动
			} else {
				$(".file_list").html(result);
				$.mobile.loading("hide");
			}
			//shilt多选
			shift_select();
			//fancybox插件
			fancy_box_image();
			fancy_box_video();
		})
	}
	//shift选择文件
	var Click = new Array();

	function shift_select() {
		$(".file_list .file_item").click(function(e) {
			Click.push($(".file_list .file_item").index($(this)))
			if (e.shiftKey) {
				var iMin = Math.min(Click[Click.length - 2], Click[Click.length - 1]);
				var iMax = Math.max(Click[Click.length - 2], Click[Click.length - 1]);
				for (i = iMin; i <= iMax; i++) {
					//第一个和最后一个不要click，原因是因为点击的时候已经click了
					if (i != iMin && i != iMax) {
						$(".file_list .file_item:eq(" + i + ")").click(); //为li 标签添加selected类
					}
				}
			} else {
				$(this).toggleClass("selected");
			}
		});
	}
	//搜索
	function search_file() {
		keywords = $(".keywords").val();
		$(".file_list").html("");
		page = 0;
		getlist();
	}
	//

	$(function() {
		listtemp(getlist); //加载模板
		//页面滚到底步加载
		$(window).bind('scroll', function() {
			show()
		});
		//滚动加载
		function show() {
			if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
				getlist();
			}
		}
		//文件类型切换
		$(".file_type_list a").click(function() {
			listtype = $(this).attr("data-val");
			//切换上传配置信息
			if (listtype == "img") {
				upload_url = img_upload_url;
				upload_accept = img_accept;
			} else if (listtype == "file") {
				upload_url = file_upload_url;
				upload_accept = file_accept;
			} else if (listtype == "video") {
				upload_url = video_upload_url;
				upload_accept = video_accept;
			}
			uploadimg(); //重置上传组件

			$(".file_type_list a").removeClass("ui-btn-active");
			$(this).addClass("ui-btn-active");
			$(".keywords").val(""); //切换文件的时候去掉搜索条件
			listtemp(search_file);
		})
	})
	//fancybox
	//相册
	function fancy_box_image(){
		$("a.fancy_box_img").fancybox();
	}
	//播放视频
	var fancybox_video_path="";
	function fancy_box_video(){
		$("a.fancy_box_video").fancybox({
			content:'<div class="fancybox_video_play"><video id="fancybox_video_src" src="#" autoplay controls></video></div>',
			onComplete:function(){
				$("#fancybox_video_src").attr("src",fancybox_video_path);
			}
		});
	}
</script>
